<template>
    <!-- 商品详情 -->
    <div class="goods-info" v-if="goods">
        <el-card shadow="hover">
            <div class="left">
                <div class="left-image">
                    <GoodsImage :image="goods.goods_picture" />
                </div>
                <div class="left-desc">
                    <ul>
                        <li>
                            <div class="block">
                                <aside>销量人气</aside>
                                <aside>200+</aside>
                                <aside>
                                    <el-icon><Trophy /></el-icon>销量人气
                                </aside>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <aside>商品评价</aside>
                                <aside>400+</aside>
                                <aside>
                                    <el-icon><ChatDotRound /></el-icon>商品评价
                                </aside>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <aside>收藏人气</aside>
                                <aside>600+</aside>
                                <aside>
                                    <el-icon><Star /></el-icon>收藏人气
                                </aside>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <aside>品牌信息</aside>
                                <aside>XX品牌</aside>
                                <aside>
                                    <el-icon><Discount /></el-icon>品牌信息
                                </aside>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="goods">
                    <div class="goods-name">
                        {{ goods.goods_name
                        }}<span
                            style="font-size: 16px; color: rgb(153, 153, 153)"
                            >/500g</span
                        >
                    </div>
                    <div class="goods-desc">
                        {{ goods.goods_desc }}
                    </div>
                    <div class="goods-price">
                        <span style="font-size: 12px">￥</span
                        >{{ goods.goods_price }}
                    </div>
                    <div class="goods-old-price">
                        <span style="font-size: 12px">￥</span>
                        {{ goods.goods_old_price }}
                    </div>
                </div>
                <div class="delivery">
                    <div class="promotion">
                        <span>促销</span>
                        <span>5月好礼放松，App领券直降20元</span>
                    </div>
                    <div class="address">
                        <span>配送</span>
                        <span>至 </span>
                        <span><Address @change="change" /></span>
                    </div>
                    <div class="service">
                        <span>服务</span>
                        <span
                            ><b style="color: #da9233">●</b>
                            无忧退货
                            <b style="color: #da9233">●</b>
                            快速退款
                            <b style="color: #da9233">●</b>
                            免费包邮<a href="javascript:;">了解详情</a></span
                        >
                    </div>
                </div>
                <div class="sku">
                    <span>数量</span>

                    <span
                        ><el-button @click="count--">-</el-button
                        ><el-input
                            style="
                                width: 50px;
                               middle;
                            "
                            v-model="count"
                        ></el-input
                        ><el-button @click="count++">+</el-button></span
                    >
                </div>
                <div class="addCart">
                    <el-popconfirm
                        v-if="!useUserStore.profile.token"
                        confirm-button-text="去登录"
                        cancel-button-text="暂不登录"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="您还未登录，登陆之后可进入购物车。"
                        @confirm="confirmEvent"
                        @cancel="cancelEvent"
                        width="290"
                    >
                        <template #reference>
                            <el-button color="#da9233">加入购物车</el-button>
                        </template>
                    </el-popconfirm>
                    <template v-else>
                        <InsertCartButton :count="count" />
                    </template>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import GoodsImage from './goods-image.vue'
import InsertCartButton from './insert-cart-button.vue'
import { ref, watch } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/stores/user'
const useUserStore = userStore()
const router = useRouter()
const route = useRoute()
const confirmEvent = () => {
    if (useUserStore.profile.token) {
    } else {
        router.push('/login')
    }
}
const cancelEvent = () => {}
const { goods } = defineProps({
    goods: {
        default: {},
    },
})
const change = data => {
    // console.log(data)
}
let count = ref('1')
watch(count, newVal => {
    count.value = newVal
    if (newVal < 1) {
        count.value = 1
    }
})
watch(
    () => route.params.gid,
    newVal => {
        count.value = 1
    }
)
</script>

<style lang="scss" scoped>
.goods-info {
    --el-color-primary: #da9233;
    min-height: 550px;
    .el-card {
        min-height: 100%;
        height: 100%;
        :deep(.el-card__body) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left {
                width: 40%;
                height: 510px;
                position: relative;
                .left-image {
                    width: 100%;
                    height: 100%;
                    margin-left: 40px;
                    margin-top: 20px;
                }
                .left-desc {
                    position: absolute;
                    left: 38px;
                    bottom: 20px;
                    ul {
                        display: flex;
                        flex-direction: row;
                        li {
                            border-left: 1px solid rgb(185, 184, 184);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100px;
                            &:nth-child(1) {
                                border: none;
                                margin: 0;
                            }
                            .block {
                                text-align: center;
                                padding: 0 20px 0 20px;
                                aside:nth-child(1) {
                                    color: rgb(164, 153, 163);
                                }
                                aside:nth-child(2) {
                                    color: red;
                                }
                                aside:nth-child(3) {
                                    white-space: nowrap;
                                    font-size: 14px;
                                    transition: all 0.3s ease;
                                    .el-icon {
                                        vertical-align: middle;
                                        font-size: 12px;
                                    }

                                    &:hover {
                                        color: #da9233;
                                        cursor: pointer;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .right {
                width: 59%;
                height: 510px;
                margin-left: 30px;
                .goods {
                    margin-top: 15px;

                    .goods-name {
                        font-size: 28px;
                    }
                    .goods-desc {
                        color: rgb(153, 153, 153);
                    }
                    .goods-price {
                        color: red;
                        display: inline;
                        font-size: 24px;
                    }
                    .goods-old-price {
                        display: inline;
                        text-decoration: line-through;
                        color: rgb(153, 153, 153);
                    }
                }
                .delivery {
                    margin-top: 20px;
                    margin-bottom: 20px;
                    background-color: rgb(245, 245, 245);
                    display: flex;
                    flex-direction: column;
                    height: 150px;
                    justify-content: space-evenly;
                    padding-left: 20px;
                    .promotion {
                        span:nth-child(1) {
                            margin-right: 10px;
                            color: rgb(153, 153, 153);
                        }
                    }
                    .address {
                        width: 520px;
                        display: flex;
                        flex-direction: row;
                        span:nth-child(1) {
                            margin-right: 10px;
                            color: rgb(153, 153, 153);
                            white-space: nowrap;
                            transform: translateY(21px);
                        }
                        span:nth-child(2) {
                            transform: translateY(21px);
                        }
                        span:nth-child(3) {
                            margin-left: 20px;
                        }
                    }
                    .service {
                        span:nth-child(1) {
                            margin-right: 10px;
                            color: rgb(153, 153, 153);
                        }

                        a {
                            transition: all 0.3s ease;
                            margin-left: 10px;
                            &:hover {
                                color: #da9233;
                            }
                        }
                    }
                }
                .sku {
                    display: flex;
                    flex-direction: columns;
                    margin-bottom: 80px;
                    > span:nth-child(1) {
                        margin-right: 10px;
                        color: rgb(153, 153, 153);
                        margin-top: 5px;
                    }
                    span:nth-child(2) {
                        .el-button {
                            font-size: 20px;
                        }
                        .el-input {
                            margin: 0 5px 0 5px;
                        }
                        .el-input__inner {
                            text-align: center;
                        }
                    }
                }
                .addCart {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 30px;
                    .el-button {
                        width: 150px;
                        height: 40px;
                    }
                }
            }
        }
    }
}
</style>
